<template>
  <div class="user">
    <div class="notice" v-if="currentComanyInfo?.role_id.includes('1') || currentComanyInfo?.role_id.includes('3')" @click="goNotice">
      <div class="point" v-if="hasUnread"></div>
      <div class="iconfont icon-tongzhi"></div>
    </div>
    <el-dropdown>
      <div class="user-info">
        <el-avatar :size="60" :src="userStore.userInfo.avatar" />
        <div class="user-name">
          <div class="name">{{ userStore.userInfo.username }}</div>
          <!-- <div class="admin">超级管理员</div> -->
        </div>

      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="goToUserCenter">个人中心</el-dropdown-item>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

</template>
<script lang="ts" setup>
import { useCompanyDataStore } from '@/store/companys'
import { useUserStore } from '@/store/user'
import { TUILogin } from '@tencentcloud/tui-core'
import { ElMessageBox } from 'element-plus'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const companyDataStore = useCompanyDataStore()
const userStore = useUserStore()

const currentComanyInfo = computed(() => companyDataStore.currentComanyInfo)

const hasUnread = computed(() => {
  return (companyDataStore.defaultCompany?.un_read ?? 0) > 0
})

const goToUserCenter = () => {
  if (!userStore.userInfo?.auth_type) {
    router.push({ path: '/perCertify' })
    ElMessageBox.confirm(
      '为了您的数据安全，需要先进行个人身份认证',
      '提示',
      {
        confirmButtonText: '去认证',
        cancelButtonText: '稍后认证',
        type: 'warning',
      }
    )
      .then(() => {
        // router.push({ path: '/perCertify' })
      })
      .catch(() => {
        router.replace({ path: '/home' })
      })
    return
  }
  router.push({
    path: "/user"
  });
}

const goNotice = () => {
  if (companyDataStore.checkAuth()) {
    router.push({
      path: "/user",
      query: {
        type: 5,
        _t: Date.now()
      }
    });
  }
}

const logout = () => {
  localStorage.removeItem('TUIKit-userInfo');
  localStorage.removeItem('userInfo')
  localStorage.removeItem('token')
  localStorage.removeItem('sign')
  router.replace({ name: "login" });
  TUILogin.logout()
}
</script>
<style lang="scss" scoped>
.user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 100%;

  .notice {
    position: relative;
    margin-right: 32px;
    cursor: pointer;

    .point {
      position: absolute;
      top: 0;
      right: 0;
      width: 6px;
      height: 6px;
      background-color: red;
      border-radius: 50%;
    }

    .iconfont {
      font-size: 24px;
      color: #666;
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 10px;

    .user-name {
      margin-left: 10px;

      .name {
        font-size: 18px;
        color: #111827;
      }

      .admin {
        font-size: 12px;
        color: #718096;
        margin-top: 8px;
      }
    }

  }
}
</style>
